<template>
  <div class="app-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>批量导入员工</span>
      </div>
      <!-- card body -->
      <!-- 上传excel组件 -->
      <!-- beforeUpload:获取文件的大小,同时在函数里面进行校验, -->
      <!-- onSuccess:beforeUpload的函数校验通过了走他 达到Excel里面的文件通过它进行读出来-->
      <UploadExcel :before-upload="beforeUpload" :on-success="onSuccess" />
    </el-card>
  </div>
</template>

<script>
// 转换excel时间
import { formatExcelDate } from '@/utils/index'
// 批量新增员工接口
import { importEmployees } from '@/api/employees'
export default {

  methods: {
    /*
     beforeUpload的作用,
1.file:选择的excel文件
2.上传之前做校验:
a:校验大小
b.校验文件的格式
c.校验通过要去return true ,校验失败return false(必须)
**/
    beforeUpload (file) {
      console.log('选择的excel文件', file)
      // 只有返回true才会触发onSuccess函数
      return true
    },
    /**
     *上一步交验完返回true触发onSuccess函数,读取excel中数据
     *header:读取的读取excel中数据的表头
     results:读取的读取excel中数据的信息
     */
    async onSuccess ({ header, results }) {
      console.log('触发onSuccess-表头', header)
      console.log('触发onSuccess-数据', results)
      // console.log('转换中文key结果', this.transformResults(results))
      // 调用接口,批量新增员工
      await importEmployees(this.transformResults(results))
      // 返回员工管理页面新增结果
      this.$router.back()
    },
    /**
     * 需求:把results中的中文属性转换成英文属性
     *results:转换的excel数据
     *
     */
    transformResults (results) {
      /**
       *思路:
1.准备中英转换的对照关系map
2.遍历循环results把读取的员工信息中的中文信息根据map转换成英文属性(中英对照表)
       *
       */
      const userMap = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 准备一个新数组=>存储转换完的新数组
      const newResults = []
      results.forEach(user => {
        // 准备一个新对象=>储存转换成英文属性的用户信息
        const newUser = {}
        // const只是去声明一个变量key去储存user里面的数据而已
        for (const key in user) {
          // key:是取出来的中文的属性,然后要把key里的值转换为英文的属性
          const enKey = userMap[key] // 这样就拿到了对应的英文
          // 思维梳理,通过userMap[key]把userMap里面的英文提取出来,赋值给enKey
          // 而user便利的的是results里面的每一天数据,所以通过userMap[key]把中文提取出来,让newUser[enKey] = user[key](中文的),这样user里面遍历的英文的键就变成了中文,同时也相当于把results里面的中文转换成了英文并且储存到了newUser里面,然后再把newUser,push到newResults里面
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            // 需要格式化excel时间(读取excel时间会多出来70年,所以要转换一下)
            newUser[enKey] = formatExcelDate(user[key], '-')
          } else {
            // 不需要转换直接英文赋值
            newUser[enKey] = user[key] // newUser里面的enKey = user[key]里面的中文,在转换中文的同时也把值进行了相等
          }
        }
        newResults.push(newUser) // 把newUser里面转换完的值push到newResults里面
      })
      return newResults // 因为 transformResults (results) 接受的值是this.transformResults(results),所以results= transformResults (results) 转换玩的值
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
